{% extends "base2.html" %}

{% block conteudo %}

<div class="row">
<div class="col-xs-12">
     <strong>{{ pedido }}</strong>
     - Aberto em {{ pedido.aberto }}
     - Usuário: <strong>{{ pedido.usuario }}</strong>.
     {% if not pedido.fechado %}
     <a href="/pedido_cliente/{{ pedido.id }}/">{% if pedido.cliente %}Cliente: {{ pedido.cliente }}{% else %}Cliente não associado{% endif %}.</a>
     {% else %}
     {% if pedido.cliente %}Cliente: {{ pedido.cliente }}{% endif %}
     {% endif %}
</div>
</div>

<div id="tabela" class="row">
<div class="col-xs-12">

<table class="table table-striped table-bordered table-hover table-responsive">
    {% if pedido.itens %}
    <tr>
        <th class="text-right" style="width: 40px;">#</th>
        <th class="text-right">Cód</th>
        <th class="text-right">Descrição</th>
        <th class="text-right" style="width: 60px;">Quant.</th>
        <th class="text-right">Val Unit.</th>
        <th class="text-right">Valor Total</th>
        <th class="text-center" style="width: 30px;"></th>
    </tr>
    {% for item in pedido.itens %}
    <tr class="{% if item.estado == 0 %}danger riscado italico text-red{% elif item.estado == 1%}success{% endif %}">
        <td class="text-right">{{ forloop.counter }}</td>
        <td class="text-right">{{ item.produto.codigo }}</td>
        <td class="text-right"><a href="" title="Adicionar observação" onclick="return observacoes({{ item.id }}, '{{ item.observacao }}', '{{ csrf_token }}');">{{ item.produto.descricao }}</a></td>
        <td class="text-right">{{ item.quantidade }}</td>
        <td class="text-right">{{ item.produto.preco_de_venda|floatformat:2 }}</td>
        <td class="text-right"><strong>{{ item.total|floatformat:2 }}</strong></td>
        <td class="text-center"><a href="/pedido/produto/excluir/?id={{ pedido.id }}&item={{ item.id }}" title="Excluir {{ item.quantidade }} x {{ item }}" class="close red">&times;</a></td>
    </tr>
    {% endfor %}
    <tr>
        <th class="text-right" colspan="5">Total</th>
        <th class="text-right">{{ pedido.total|floatformat:2 }}</th>
        <th class="text-center"></th>
    </tr>
    {% endif %}
</table>

</div>
</div>

<div class="row">
<div class="col-xs-12">

    <form action="" method="post" class="form-inline pull-right" role="form">
        {% csrf_token %}
        <div class="form-group">
            <input id="quantidade" class="form-control text-center input-lg" type="number" min="1" placeholder="Quantidade" name="quantidade" value="{{ quantidade }}" autocomplete="off" required style="width: 80px" />
        </div>
        <div class="form-group">
            <input id="codigo" class="form-control text-center input-lg" type="text" placeholder="Código" name="codigo" value="" required style="width: 80px" autocomplete="off" />
        </div>
        <button type="submit" class="btn btn-primary btn-lg" title="Adicionar"><span class="glyphicon glyphicon-plus"></span>  Adicionar</button>
    </form>

</div>
</div>

<div class="row">
<div class="col-xs-12">
    
        <div class="btn-group pull-left">
            <a class="btn btn-default btn-primary btn-lg" href="/pedido/?id={{ pedido.id }}" title="voltar" ><span class="glyphicon glyphicon-chevron-left"></span> {{ pedido.mesa }}</a>
        </div>
        
        <div class="btn-group pull-right dropup">
            <a class="btn btn-default btn-danger btn-lg" href="/pedido/produto/cancelar/?id={{ pedido.id }}" title="Cancelar inclusão de itens" ><span class="glyphicon glyphicon-remove"></span> Cancelar</a>
            <a class="btn btn-default btn-success btn-lg" href="/pedido/produto/confirmar/?id={{ pedido.id }}" title="Confirmar novos itens" ><span class="glyphicon glyphicon-ok"></span> Confirmar</a>
            <a class="btn btn-default btn-lg" href="/produtos/{{ pedido.mesa.id }}/" title="Procurar produtos" ><span class="glyphicon glyphicon-list-alt"></span></a>
        </div>
</div>
</div>

{% endblock %}

{% block template_js %}
<script type="text/javascript">
$(document).ready(function() {
	carrega_produtos();
    
    if ($("#quantidade").val().trim() == '') {
        $("#quantidade").val(1);
        $("#codigo").focus();
        $("#codigo").select();
    } else {
        $("#codigo").focus();
        $("#codigo").select();
    }
    
    $("#quantidade").focus(function() {
        $(this).select();
    });
    $("#quantidade").focusout(function() {
        $(this).val($(this).val().trim());
        if ($(this).val().trim() == '' || isNaN($(this).val()) || $(this).val() <= 0)
            $(this).val("1");
    });
    $("#codigo").focus(function() {
        $(this).select();
    });
    
    $("#codigo").keyup(function(e) {
        if (e.keyCode == 37) {
            $("#quantidade").focus();
            $("#quantidade").select();
        } else if (e.keyCode == 106) {
            valor = $(this).val().replace("*", "").replace(",", ".").trim();
            if (valor != "" && ! isNaN(valor)) {
                valor = valor.replace(".", ",")
                $("#quantidade").val(valor);
                $(this).val("");
            } else {
                $(this).val("");
                $("#quantidade").focus();
                $("#quantidade").select();
            }
        }
    });
    
    $("#quantidade").keyup(function(e) {
        if (e.keyCode == 39) {
            $("#codigo").focus();
            $("#codigo").select();
        }
    });
});

function observacoes(item_id, observacao, csrf_token) {
    
    obs = window.prompt("Observações", observacao);
    if (obs == null)
        return false;
    
    $.ajax(
        {
            type: "POST",
            url: "/pedido/item/observacao/",
            data: {
                item_id: item_id,
                observacao: obs,
                csrfmiddlewaretoken: csrf_token
            },
            async: false,
            success: function(retorno) {
                alert('Observações adicionadas!');
                return true;
            },
            statusCode: {
                404: function() {
                    alert('Pagina não encontrada');
                    return false;
                },
                408: function() {
                    alert('Não responde');
                    return false;
                }
            }
        }
    );
}

function carrega_produtos() {
	var csrf_token = getCookie('csrftoken');
	var produtos = [];
	
	$( "#codigo" ).autocomplete({
        source: produtos
    });
	
	$.ajax({
        type: "POST",
        url: "/estoque/produtos/",
        data: {
            csrfmiddlewaretoken: csrf_token
        },
        async: false,
        success: function(retorno) {
            $.each(retorno, function(key, value){
            	produtos[key] = value.fields.codigo + ' - ' + value.fields.descricao;
            });
            
            $( "#codigo" ).autocomplete({
                source: produtos
            });
        },
        statusCode: {
            404: function() {
                alert('Pagina não encontrada');
                return false;
            },
            408: function() {
                alert('Não responde');
                return false;
            }
        }
    });
	$("#tabela").scrollTop($("#tabela")[0].scrollHeight);
}
</script>
{% endblock %}

